<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    *{
		        margin: 0;
		        padding: 0;
		    }
		
		    #box{
		        width: 100px;
		        height: 100px;
		        background-color: red;
		
		        position: absolute;
		    }
		</style>
	</head>
	<body>
		<button id="btn">往右走</button>
		<button id="btn1">往左走</button>
		<div id="box"></div>
		<script src="通用兼容文件.js">
		</script>
		<script>
			window.onload = function(){
			
				// 0. 变量
				    var box = $("box");
				
				    // 1. 监听按钮的点击
				    $("btn").onclick = function () {
				       move1(box, 1000);
				    };
				
				    $("btn1").onclick = function () {
				        move1(box, 50);
				    };
				};
			
			//升级版缓动动画
				function move1(obj, end){
			clearInterval(obj.timer);
					
				obj.timer = setInterval(function(){
						
				var speed = (end-obj.offsetLeft)*0.2;
				//判断剩余步长是否足够
					speed =(end > obj.offsetLeft)?Math.ceil(speed):Math.floor(speed);
					
					obj.style.left = obj.offsetLeft +speed +'px';
					 obj.innerText = obj.offsetLeft;
					 
					 if(obj.offsetLeft === end){
					clearInterval(obj.timer);	 
					 }
				
						
					},200);
		
					
				}
		
				
		
			
		</script>
	</body>
</html>
